<template>
  <view class="box rtl">
    <!-- 顶部导航 -->
    <CustmNavBar
      :title="t('Lang_Order')"
      :bc="bg"
      :color="'#fff'"
      :dark="true"
      :isBack="true"
    >
      <template #tabs>
        <view
          style="
            width: 100%;
            height: 70rpx;
            margin-top: 20rpx;
            margin-bottom: 20rpx;
          "
        >
          <uv-tabs
            style="overflow-x: auto"
            :list="useTabList"
            :current="currentTab"
            @click="tabClick"
            @change="tabChange"
            :scrollable="tabList.length > 3 ? true : false"
            itemStyle="color:#fff; height: 70rpx;"
            lineColor="#fff"
            :activeStyle="{
              color: '#fff',
              fontWeight: 'bold',
              transform: 'scale(1.05)',
            }"
            :inactiveStyle="{
              color: '#fff',
              transform: 'scale(1)',
            }"
          ></uv-tabs>
        </view>
      </template>
    </CustmNavBar>

    <view class="order-content">
      <scroll-view
        v-if="orderList.length > 0"
        scroll-y="true"
        class="order-content-box"
        @scrolltolower="lower"
      >
        <view class="order-item" v-for="(item, i) in orderList" :key="i">
          <view class="order-head">
            <view class="payment-info">
              <view class="payment-type">
                <!-- {{t("cash settlement")}} -->
                <uv-icon
                  v-if="true"
                  name="/static/images/order/orderTypeCash.png"
                  size="22"
                ></uv-icon>
                <uv-icon
                  v-else
                  name="/static/images/order/orderTypeLoan.png"
                  size="22"
                ></uv-icon>
              </view>
              <view class="order-num"> #{{ item.orderNo }} </view>
            </view>
            <view class="status">
              {{ t("obligation") }}
            </view>
          </view>
          <view class="goods">
            <view
              class="goods-item"
              v-for="(v, j) in item.orderDetailsList"
              :key="j"
            >
              <view class="goods-img">
                <image
                  class="img"
                  :src="v.productPic || '/static/log.png'"
                  mode="widthFix"
                ></image>
              </view>
              <view class="goods-info">
                <view class="goods-info-detail">
                  <view class="post-code">
                    {{ v.oe }}
                  </view>
                  <view class="goods-name">
                    {{ item.productName }}
                  </view>
                  <view class="brand">
                    <image
                      class="logo"
                      :src="v.carMakePicture || '/static/log.png'"
                      mode="widthFix"
                    >
                    </image>
                    <view class="brand-time">
                      {{ v.label }}
                    </view>
                  </view>
                </view>
                <view class="goods-price">
                  <view class="price">
                    {{ v.productPrice.toFixed(2) }}
                  </view>
                  <view class="unit"> SAR </view>
                  <view class="num"> x{{ v.productQuantity }} </view>
                </view>
              </view>
            </view>
          </view>
          <view class="order-footer">
            <view class="total-price">
              {{ t("Total amount") }} {{ item.totalAmount }} SR
            </view>
            <view @click="orderDetail(item)">
              <view class="check-details"
                >{{ t("check details")
                }}<uv-icon
                  class="flip"
                  name="arrow-right"
                  color="#fff"
                ></uv-icon
              ></view>
            </view>
            <!-- <view>
              <view class="upload" @click.stop="uploadImg(item)" v-if="item.payPicList == null">
                {{ t("Upload") }}
              </view>
            </view> -->
            <!-- <view class="total">
              <view class="total-num">
                {{ t("common") }}
                <text class="active">{{ item.totalNumber }}</text>
              </view>
              <view class="total-price">
                {{ t("order amount") }} {{ item.totalAmount }}
              </view>
            </view> -->
          </view>
        </view>
        <view class="" style="height: 1px"> </view>
      </scroll-view>
      <view v-if="showEmpty">
        <BgEmpty :content="t('No order')" />
      </view>
    </view>
  </view>
</template>

<script setup>
import BgEmpty from "@/components/BgEmpty";
import { ref, onMounted } from "vue";
import { OrderAPI } from "@/api/index";
import { useDeviceStore } from "@/store";
import CustmNavBar from "@/components/CustomNavBar/index.vue";
import { upload } from "@/utils/upload";
import { onReachBottom, onLoad } from "@dcloudio/uni-app";
import { useI18n } from "vue-i18n";
import { computed } from "vue";
const { t } = useI18n();
const deviceStore = useDeviceStore();

const bg = ref("#127B56");
// 是否是预购
const isPre = ref(false);
onLoad(({ type }) => {
  if (type) {
    bg.value = "#723891";
    isPre.value = true;
  }
});
// Unpaid Packing Shipping Completed Cancelled
const tabList = ref([
  {
    name: t("Lang_Unpaid"),
    status: 2,
  },
  {
    name: t("Lang_Packing"), //'待支付',
    status: 3,
  },
  {
    name: t("Lang_Shipping"),
    status: 4,
  },
  {
    name: t("Lang_Completed"),
    status: 6,
  },
  {
    name: t("Lang_Cancelled"), //'已签收',
    status: 7,
  },
]);

const preTabList = ref([
  {
    name: t("Lang_Applying"), // 申请中
    status: 1,
  },
  {
    name: t("Lang_Manufacturing"), // 生产中
    status: 2,
  },
  {
    name: t("Lang_InTransit"), // 运输中
    status: 3,
  },
  {
    name: t("Lang_InWarehouse"), // 已入库
    status: 4,
  },
  {
    name: t("Lang_OrderPlaced"), // 已下单(对应创建了订单）
    status: 5,
  },
  {
    name: t("Lang_Cancelled"), //已取消
    status: 6,
  },
]);

const useTabList = computed(() => {
  let list = [];
  if (isPre.value) {
    list = preTabList.value;
  } else {
    list = tabList.value;
  }
  list.unshift({
    name: t("Lang_All"),
    status: "",
  });
  return list;
});

const activeIndex = ref(0);

const orderStatus = ref("");
const page = ref(1);
const orderList = ref([]);
const showEmpty = ref(false);
onMounted(() => {
  queryList();
});
const uploadImg = async (data) => {
  // return console.log(data);
  uni.showLoading({
    title: "正在加载",
  });
  let res = await upload();
  uni.hideLoading();
  OrderAPI.orderUpdate({
    orderStatus: data.orderStatus,
    picUrls: [res.msg],
    // "orderReceiverAddressDto": {
    // 	"receiverName": "yml",
    // 	"receiverPhone": "123456",
    // 	"receiverDetailAddress": "上海"
    // },
    id: data.id,
  });
};

const tabChange = (index) => {
  activeIndex.value = index.index;
};
const tabClick = (index) => {
  activeIndex.value = index.index;
  page.value = 1;
  orderList.value = [];
  orderStatus.value = index.status;
  queryList();
};

const orderDetail = (data) => {
  uni.setStorageSync("detail-id", data.id);
  goToView("/pages/order/orderDetail");
};

const queryList = async () => {
  let res = await OrderAPI.getMessageBoardsList({
    pageSize: 10,
    pageNum: page.value,
    shopId: deviceStore.MyShop.id,
    orderStatus: orderStatus.value.toString(),
    paymentMethod: "",
    orderType: isPre.value ? 1 : 0,
  });
  if (res.data.items.lenght <= 0) {
    return;
  }
  page.value++;
  orderList.value.push(...res.data.items);
  if (orderList.value.length > 0) {
    showEmpty.value = false;
  } else {
    showEmpty.value = true;
  }
};
onLoad((e) => {
  console.log(e);
});
onReachBottom(() => {
  console.log(777);
});
const lower = () => {
  queryList();
  console.log(666);
};
const goToView = (path) => {
  uni.navigateTo({
    url: path,
  });
};
</script>

<style lang="scss" scoped>
@import "@/static/css/index.scss";

.bg-topbar-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  // word-break: break-all;
  color: $primary-f;
  overflow: hidden;
}

.box {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.head {
  background: #267a58;
  color: #fff;
  border-radius: 10rpx;

  .title {
    padding: 20rpx 0;
    text-align: center;
  }

  .select_list {
  }
}

.classify-scroll {
  width: 100%;
  // height: 55px;
  padding: 20rpx 0;
  overflow: hidden;
  // background-color: #ffffff;
  white-space: nowrap;

  .scroll-view-item {
    display: inline-block;
    width: 140rpx;
    word-wrap: break-word;
    white-space: normal;
    // height: 300rpx;
    // line-height: 300rpx;
    text-align: center;
    font-size: 36rpx;
    margin: 0 40rpx;
    font-size: 28rpx;
    position: relative;
    padding-bottom: 10rpx;
  }

  .item_active {
  }

  .item_active::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, -100%);
    width: 120%;
    height: 4rpx;
    background: #fff;
    border-radius: 900rpx;
  }
}

.order-content {
  // margin: 10rpx 0rpx 0;
  padding: 10rpx 20rpx 0;
  // padding-bottom: 100rpx;
  flex: 1;
  // overflow-y: scroll;
  box-sizing: border-box;
  overflow: hidden;
  // border-radius: 40rpx 40rpx 0 0;

  .order-content-box {
    height: 100%;
  }

  .order-item {
    background: #fff;
    padding: 20rpx;
    border-radius: 10rpx;
    margin-bottom: 20rpx;

    .order-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10rpx 0 20rpx;
      border-bottom: 1px solid #f4f4f4;
      margin-bottom: 20rpx;

      .payment-info {
        display: flex;
        align-items: center;
        font-size: 28rpx;

        .payment-type {
          // border: 1px solid #ff0000;
          // color: #ff0000;
          border-radius: 5rpx;
          padding: 0 5rpx;
          font-size: 20rpx;
        }

        .order-num {
          margin-left: 10rpx;
          color: #bababa;
        }
      }

      .status {
        font-size: 26rpx;
        color: #a2a2a2;
      }
    }

    .goods {
      .goods-item {
        color: #a2a2a2;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #f4f4f4;
        margin-bottom: 20rpx;

        .goods-img {
          width: 120rpx;

          .img {
            width: 100%;
          }
        }

        .goods-info {
          width: calc(100% - 120rpx);
          font-size: 28rpx;
          flex: 1;
          padding-left: 20rpx;
          display: flex;
          box-sizing: border-box;

          .goods-info-detail {
            width: calc(100% - 120rpx);
            flex: 1;
            padding: 0 10rpx;
            box-sizing: border-box;

            .post-code {
              background: $primary-b;
              color: #fff;
              width: fit-content;
              padding: 5rpx 10rpx;
              font-size: 24rpx;
              border-radius: 5rpx;
              margin-bottom: 10rpx;
            }

            .goods-name {
              font-size: 26rpx;
              margin-bottom: 10rpx;
            }

            .brand {
              display: flex;
              align-items: center;

              .logo {
                width: 50rpx;
              }

              .brand-time {
                font-size: 24rpx;
              }
            }
          }

          .goods-price {
            width: 120rpx;
            text-align: right;

            .price {
              font-size: 30rpx;
              color: #a2a2a2;
            }

            .unit {
              font-size: 22rpx;
              margin-bottom: 10rpx;
            }

            .num {
              font-size: 22rpx;
            }
          }
        }
      }
    }
  }
}

.order-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 10rpx 10rpx;

  .upload {
    background: #ff0000;
    border-radius: 900rpx;
    color: #fff;
    padding: 5rpx 30rpx;
    font-size: 26rpx;
  }

  .total {
    display: flex;
    align-items: center;
    font-size: 26rpx;

    .total-num {
      margin-right: 10rpx;
      font-size: 24rpx;
      color: #bababa;

      .active {
        color: #555;
      }
    }

    .total-price {
    }
  }
}

.check-details {
  background-color: #1aad19;
  color: #fff;
  padding: 10rpx 20rpx;
  border-radius: 10rpx;
  font-size: 26rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
